<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport"
		  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<!--引入本地 element-ui 的样式，-->
	<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
	<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
	<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

	<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
	<title>缴费记录</title>
</head>
<body>
<div id="app">
	<div class="topbox">
		<div class="top">
			<!-- 开始-结束时间 -->
			<div class="startend">
				<div>
					<el-date-picker v-model="value1" type="date" value-format="yyyy-MM-dd" placeholder="开始日期">
					</el-date-picker>
				</div>
				<div></div>
				<div>
					<el-date-picker v-model="value2" type="date" value-format="yyyy-MM-dd" placeholder="结束日期">
					</el-date-picker>
				</div>

				<!-- <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker> -->
			</div>
			<!-- 按钮 -->
			<div class="btns">
				<button class="btn" @click="searchdata"><i class="el-icon-search"></i>查询</button>
				<button class="btn" @click="chongzhi"><i class="el-icon-refresh-right"></i>重置</button>
			</div>
		</div>
	</div>
	<!-- 表格 -->
	<div class="main"  >
		<div v-infinite-scroll="nextPage" style="overflow:auto;height: 1000px"    >
			<div class="card" v-for="(item,index) in listdata" >
				<div class="contents">
					<span>姓名：</span>
					<span>{{item.khmc}}</span>
				</div>
				<div class="contents">
					<span>购水量：</span>
					<span>{{item.gsl}}</span>
				</div>
				<div class="contents">
					<span>金额：</span>
					<span>{{item.fee}}元</span>
				</div>
				<div class="contents" >
					<span>订单编号：</span>
					<span>{{item.ddbh}}</span>
				</div>
				<div class="contents">
					<span>交易时间：</span>
					<span>{{item.xdsj}}</span>
				</div>
				<div class="contents" v-if="item.is_kp != '1'">
					<span>操作：</span>
					<span><a @click="kaipiao(item)">开票</a></span>
				</div>
			</div>
		</div>
	</div>

</div>
</body>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			value1: '',
			value2: '',
			listdata:[],
			pageNumber:1,
		},
		created() {
			localStorage.setItem("user", JSON.stringify({"org_id":"baicheng"}));
			this.loadData();
		},
		methods: {
			//登录
			async loginOpenid(){
				this.parmsData = getParams();
				if(this.parmsData.code != "" && this.parmsData.code != undefined){
					const res = await postWebCustom(getTableId("1942"),{code:this.parmsData.code});
					if(res.code == 0){
						this.$message(res.msg);
						return;
					}
					if(res.data.openid){
						localStorage.setItem("token",res.data.openid);
					}
				}else {
					let token = localStorage.getItem("token");
					if(null == token){
						let url = wwwurl+"/admin/html/module/baicheng/tradeRecords.html";
						window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5aba54c8ab15d29d&redirect_uri="+url+"&response_type=code&scope=snsapi_base&#wechat_redirect";
					}
				}

			},
			//申请开票
			kaipiao(item){
				window.location.href = "/admin/html/module/baicheng/InvoiceApply.html?id="+item.id;
			},
			chongzhi(){
				this.pageNumber = 1;
				this.value1 = "";
				this.value2 = "";
				this.listdata = [];
				this.loadData();
			},
			searchdata(){
				this.pageNumber = 1;
				this.listdata = [];
				this.loadData();
			},
			nextPage(){
				this.pageNumber++;
				this.loadData();
			},
			async loadData () {
				const res = await postWebCustom(getTableId("1945"),{ksrq:this.value1,jsrq:this.value2,pageNumber:""+this.pageNumber});
				this.listdata = [...this.listdata,...res.data.rows];
			}
		},

	})
</script>
<style type="text/css">
	body {
		margin: 0;
	}

	.topbox {
		width: 100%;
		position: fixed;
		z-index: 10;
		background-color: #fff;
	}

	.top {
		padding: 10px;
	}

	.startend {
		display: grid;
		grid-template-columns: repeat(1, 1fr 10px 1fr);
	}

	.startend div {
		width: 100%;
		overflow: hidden;
		border-right: 1px solid #DCDFE6;
		border-radius: 4px;
	}

	@media (min-width: 460px) {
		.startend div {
			border: none;
		}
	}

	.btns {
		display: flex;
		margin-top: 10px;
	}

	.btn {
		background-color: #409eff;
		color: #fff;
		margin-right: 10px;
		padding: 10px 30px;
		border: none;
		border-radius: 4px;
	}

	.main {
		padding: 110px 10px 10px 10px;
	}

	.card {
		border: 1px solid #eee;
		border-radius: 20px;
		padding: 10px;
		box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .1);
		margin-bottom: 10px;
	}

	.contents {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(1, 80px 1fr);
	}

	.contents span {
		height: 40px;
		line-height: 40px;
		/* text-align: right; */
	}

	.contents a {
		text-decoration: none;
		color: #409eff;
	}
</style>
</html>
